<script setup lang="ts">
import { ref } from 'vue';
import type { SkuItem } from '@/types/product';
import { showToast } from 'vant';
import { skuDetail } from '@/common/api/hbMarket';

const emit = defineEmits<{
  (e: 'onSubmit', sku: SkuItem, cnt: number): void;
}>();

const props = withDefaults(defineProps<{ pid: string }>(), { pid: '' });

defineExpose({
  open() {
    if (skuList.value.length) {
      show.value = true;
    } else {
      showToast('sku列表为空');
    }
  },
});

const show = ref(false);
const skuList = ref<SkuItem[]>([]);
const checkedSku = ref<SkuItem>(); // 选中sku
const cnt = ref(1); // 购买数量

const onLoad = async () => {
  try {
    const res = await skuDetail({ pid: props.pid });
    console.log('skuDetail: ', res.result);
    if (res.result.list.length) {
      skuList.value = res.result.list;
      checkedSku.value = skuList.value[0];
    }
  } catch {
    /** empty */
  }
};
onLoad();

const close = () => {
  show.value = false;
};

const submit = () => {
  if (checkedSku.value) {
    emit('onSubmit', checkedSku.value, cnt.value);
  } else {
    showToast('请选择规格');
  }
};

const handleTagClick = (item: SkuItem) => {
  checkedSku.value = item;
};
</script>
<template>
  <div class="skuPopup">
    <!-- 圆角弹窗（底部） -->
    <van-popup v-model:show="show" @close="close" round position="bottom" safe-area-inset-bottom>
      <div class="p-5">
        <div class="mb-5 flex items-end" v-if="checkedSku">
          <van-image width="100" height="100" radius="3" fit="cover" :src="checkedSku.images" />
          <div class="pl-3">
            <div class="flex items-center">
              <div class="text-[red] text-xl"><span class="text-xs">{{ checkedSku.skuprice }}积分</span></div>
              <div class="text-[#666666] text-sm line-through ml-1">
                <span class="text-xs">{{ checkedSku.price }}积分</span>
              </div>
            </div>
            <div class="text-xs text-[#666666]">库存：{{ checkedSku.stock }}</div>
          </div>
        </div>
        <div class="text-sm">
          <div class="font-bold">规格</div>
          <div class="flex flex-wrap items-center pt-5 pb-3 text-xs">
            <div
              v-for="item in skuList"
              @click="handleTagClick(item)"
              :key="item.skuname"
              class="leading-8 mr-3 mb-3 bg-[#f2f2f2] px-5 rounded-full"
              :class="{ checkedSku: checkedSku?.skuname === item.skuname }"
            >
              {{ item.skuname }}
            </div>
          </div>
        </div>
        <div class="flex justify-between mb-5 items-center">
          <div class="text-sm font-bold">购买数量</div>
          <van-stepper v-model="cnt" />
        </div>
        <van-button type="primary" color="#EC2D69" block round @click="submit">确定</van-button>
      </div>
      <!-- 底部安全区 -->
      <div class="van-safe-area-bottom"></div>
    </van-popup>
  </div>
</template>
<style lang="less" scoped>
.skuPopup {
  .checkedSku {
    outline: 1px solid #fa2c19;
    color: #fa2c19;
    background: #fae1de;
  }
}
</style>
